<template>
  <div class="order-from">
    <info-window
      class="info-window"
      info-width="100%"
      info-height="100%"
      header-align="center"
      header-title=""
    >
      <el-form
        ref="form"
        :inline="true"
        class="form-layout"
        :rules="rules"
        :model="model"
      >
        <div class="header-title spaceMargin">
          问题信息
        </div>
        <el-form-item
          label="标题:"
          prop="orderTitle"
          class="form-layout__item-col1"
        >
          <el-input
            v-model="model.orderTitle"
            type="text"
            placeholder="请输入标题"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          label="类型:"
          prop="orderTypeCode"
          class="form-layout__item-col3"
        >
          <el-select
            v-model="model.orderTypeCode"
            placeholder="请选择问题类型"
            clearable
            style="width: 100%;"
          >
            <el-option
              v-for="dict in dict.type.sys_work_order_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
              @click.native="clickOption(dict, 'orderType')"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属应用:"
          prop="appId"
          class="form-layout__item-col3"
        >
          <el-select
            v-model="model.appId"
            placeholder="请选择所属应用"
            clearable
            style="width: 100%;"
          >
            <el-option
              v-for="item in searchOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click.native="clickOption(item, 'app')"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="期望完成时间:"
          prop="expectFinishTime"
          class="form-layout__item-col3"
        >
          <el-date-picker
            v-model="model.expectFinishTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择期望完成时间"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item
          label="问题内容:"
          prop="context"
          class="form-layout__item-col1"
        >
          <input-rich
            v-model="model.context"
            :height="270"
            :upload-fn="uploadFn"
            :download-fn="downFile"
            :required="true"
            @img="handleImg"
          />
          <p>
            注: 请注意！问题内容应遵守相关法律法规和基本道德规范，不包含诽谤、歧视、侵权，违法等行为，并避免敏感话题和广告宣传，如发现违规内容，该问题的审核将无法通过。
          </p>
        </el-form-item>
        <el-form-item
          class="upload-item"
          label="内容附件:"
          label-width="130px"
        >
          <file-upload
            v-model="model.orderAttachment"
            :limit="5"
            :is-show-tip="false"
            :drag="false"
            biz-path="approve/oo-csc-upp-approve-atom"
            upload-type="minio"
          />
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button
          class="commonBtn"
          @click="handleBack"
        >
          返回
        </el-button>
        <el-button
          type="primary"
          @click="handleSave"
        >
          提交
        </el-button>
      </div>
    </info-window>
  </div>
</template>

<script>
import InfoWindow from "@/components/mainEntrance/info-window/index.vue";
import InputRich from "@/components/inputRich/index.vue";
import FileUpload from "@/components/mainEntrance/FileUpload/index.vue";
import returnPaterPage from "@/utils/returnPaterPage";

import { applicationAllList, save } from "@/api/workOrder/allWorkOrders.js";
import { encode } from "@/utils/base64Convert.js";
import { useInputRichMixins } from "@/components/inputRich/mixins/useInputRichMixins.js";

export default {
  name: "AddWorkOrder",
  components: {
    InfoWindow,
    InputRich,
    FileUpload
  },
  dicts: ["sys_work_order_type"],
  mixins: [useInputRichMixins],
  data() {
    return {
      model: {
        orderTitle: "",
        orderTypeCode: "",
        appId: "",
        expectFinishTime: "",
        context: "",
        orderAttachment: ""
      },
      rules: {
        orderTitle: [{ required: true, message: "请输入标题", trigger: ["blur", "change"] }],
        orderTypeCode: [{ required: true, message: "请选择问题类型", trigger: "change" }],
        appId: [{ required: true, message: "请选择所属应用", trigger: "change" }],
        expectFinishTime: [{ required: true, message: "请选择期望完成时间", trigger: "change" }],
        context: [{ required: true, message: "请输入问题内容", trigger: ["blur", "change"] }]
      },
      searchOption: [],
      imgUrls: {},
      returnName: "AllWorkOrders"
    };
  },
  created() {
    this.getSelectOptions();
  },
  methods: {
    getSelectOptions() {
      this.searchOption = [];
      applicationAllList().then(response => {
        response.data.data.forEach(el => {
          this.searchOption.push({
            label: el.appName,
            value: el.appId
          });
        });
        this.searchOption.push({
          label: "其他",
          value: "other"
        });
      });
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.model.orderContext = this.model.context;
          if (Object.keys(this.imgUrls).length) {
            Object.keys(this.imgUrls).forEach(key => {
              this.model.orderContext = this.model.orderContext.replace(key, this.imgUrls[key]);
            });
          }
          this.model.orderContext = encode(this.model.orderContext);
          save(this.model).then(() => {
            this.$message.success("新增成功！");
            returnPaterPage(this.$route.path, this.returnName);
          });
        }
      });
    },
    handleBack() {
      returnPaterPage(this.$route.path, this.returnName);
    },
    clickOption(item, type) {
      if (type === "app") {
        this.model.appName = item.label;
      } else {
        this.model.orderTypeName = item.label;
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "@/assets/styles/less/form.less";

.form-layout {
  padding: 20px;
  height: calc(100% - 60px);
  overflow-y: auto;

  .form-layout(120px);
}

.order-from {
  width: 100%;
  height: 100%;

  .header-title {
    font-size: 16px;
    color: var(--light-blue-color);
    font-weight: 700;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--light-blue-color);
  }

  .form-layout__item-col1 {
    /deep/ .el-input__count {
      .el-input__count-inner {
        background: transparent;
      }
    }
  }

  /deep/ .upload-file-text {
    display: inline-block;
  }

  .upload-item {
    /deep/ .el-form-item__content {
      line-height: 0px;
    }
  }

  .footer {
    width: 100%;
    height: 50px;
    padding-right: 20px;
    border: none;
    text-align: end;
  }
}
</style>